<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '使用与帮助详情',
    layout: false,
    'app-plus': {
      background: '#f8f8f8',
    },
    enablePullDownRefresh: true,
  },
}
</route>

<template>
  <th-page-box
    :tabBarProps="{
      show: true,
      title: '使用与帮助详情',
      showLeft: true,
    }"
  >
    <!-- <template #tabBar>
      <wd-navbar title="使用与帮助详情" :bordered="false" safeAreaInsetTop>
        <template #left>
          <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
        </template>
      </wd-navbar>
    </template> -->

    <template #inner>
      <view class="content_box" style="flex: 1">
        <th-card title="信息">
          <!-- <th-form> -->
          <th-form-item label="菜单">
            <text class="text">{{ form.menuName }}</text>
          </th-form-item>
          <th-form-item label="标题">
            <text class="text">{{ form.menuTitle }}</text>
          </th-form-item>
          <th-form-item label="描述">
            <text class="text">{{ form.menuDoc }}</text>
          </th-form-item>
        </th-card>
        <view class="rich_text_box">
          <th-card title="使用说明">
            <view class="rich-text">
              <!-- <view v-html="form.richText"></view> -->
              <mp-html :content="form.richText"></mp-html>
            </view>
          </th-card>
        </view>
        <th-card title="附件" v-if="files && files.length">
          <thPreviewFile :files="files"></thPreviewFile>
          <!-- <view class="image-list">
          <view class="image" v-for="(item, index) in files" :key="index">
            <image
              v-if="item.type === 'image'"
              :src="item.src"
              @click="previewImage(index)"
              mode="aspectFill"
            ></image>
            <view
              v-else-if="item.type === 'video'"
              class="doc"
              :class="item.type"
              @click="previewVideo(item)"
            ></view>
            <view v-else class="doc" :class="item.type" @click="previewOnline(item.src)"></view>
          </view>
        </view> -->
        </th-card>
      </view>
    </template>
  </th-page-box>
</template>

<script lang="ts" setup>
import { getDetails } from '@/service/admin/sysMenuDoc';
import { getFileType, downloadFile, previewOnline } from '@/utils/util';

const loading = ref(false);
const files = ref([]);

// 提交表单数据
const form = reactive({
  id: '',
  menuId: null,
  menuName: '',
  menuTitle: null,
  menuDoc: null,
  sort: 0,
  richText: '',
  files: [],
});

const init = (params) => {
  uni.showLoading();
  getDetails(params.id)
    .then((res) => {
      console.log('res', res);
      const info = res.data;
      if (info.richText) {
        let node = '';
        node = info.richText.replace(/<table/g, '<table class="table"');
        node = node.replace(/<tr/g, '<tr class="tr"');
        node = node.replace(/<th/g, '<th class="th td"');
        node = node.replace(/<td/g, '<td class="td"');
        info.richText = node;
      }
      if (info.files && info.files.length) {
        const filesList = [];
        info.files.forEach((item) => {
          filesList.push({
            ...item,
            src: item.fileUrl,
            name: item.fileName,
            type: getFileType(item.fileUrl),
          });
        });
        files.value = filesList;
      }
      Object.assign(form, info);
    })
    .finally(() => {
      uni.stopPullDownRefresh();
      uni.hideLoading();
    });
};

const previewVideo = (e) => {
  uni.navigateTo({
    url: `/pages/common/preview-video?src=${encodeURIComponent(e.src)}`,
    animationType: 'fade-in',
  });
};

const previewImage = (current) => {
  uni.previewImage({
    current,
    indicator: 'number',
    urls: files.value,
  });
};

onLoad((options) => {
  init({
    id: options.id,
  });
});
onPullDownRefresh(() => {
  // 重新获取
  init(form);
});
</script>
<style scoped lang="scss">
page {
  background-color: #f8f8f8;
}
.content_box {
  padding-top: 10rpx;
}
.rich_text_box {
  :deep(.block .content) {
    padding: 0 !important;
  }
}
:deep(.rich-text) {
  width: 100%;
  padding: 0 20rpx;
  overflow-x: hidden;
  box-sizing: border-box;
  .uni-video-container {
    position: relative;
    height: auto;
  }
  video {
    width: 100% !important;
    height: auto;
  }
  img {
    width: 100% !important;
    height: auto;
  }
  .table {
    border-collapse: collapse;
  }
  .td {
    text-align: center;
    border: 1px solid !important;
  }
}

.wd-cell-group {
  ~ .wd-cell-group {
    margin-top: 24rpx;
  }
}
.check-update-submit-item {
  // padding: 20% 0 0%;
  padding: 50rpx 0 0;

  .check-update-submit {
    width: 60%;
    height: 70rpx;
    margin: 0 auto;
    font-size: 30rpx;

    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;

    // background-color: #0081ff;
    background-color: rgb(8 131 237);
    border-radius: 10rpx;
  }
  .check-update-submit.gray {
    background-color: rgba(128, 128, 128, 0.8);
  }
}
.image-list {
  .image {
    display: inline-block;
    width: 170rpx;
    height: 170rpx;
    padding: 12rpx;
    image {
      width: 100%;
      height: 100%;
      border: 1rpx solid #dedede;
    }
  }
}
</style>
